<template>
	<view class="register l-whitespace">
		<!-- 使用非原生导航栏后需要在页面顶部占位 -->
		<view style="height:80px;"></view>
		<view class="register-title color1">找回密码</view>
		<view class="register-from">
			<view class="register-from-wrap">
				<view class="field-item">
					<view class="field-item-title">手机号码</view>
					<van-field clearable type="number" placeholder="手机号码" @change="cPhone" />
				</view>
				<view class="field-item">
					<view class="field-item-title">短信验证码</view>
					<van-field clearable type="number" placeholder="验证码" use-button-slot @change="cVerification">
						<view class="register-from-sms" :class="{ activeSMS: ifSMS }" @tap="sendCode" slot="button">{{ timer.text }}</view>
					</van-field>
				</view>
				<view class="field-item">
					<view class="field-item-title">新登录密码</view>
					<van-field clearable type="password" placeholder="6-20位,由字母与数字组成" @change="cPassword" />
				</view>
				<view class="field-item">
					<view class="field-item-title">确认新密码</view>
					<van-field clearable type="password" placeholder="请确认您的新密码" @change="cPassword2" />
				</view>
				<view class="field-item">
					<view class="field-item-title">新二级密码</view>
					<van-field clearable type="password" :value="from.payPassword" placeholder="6-20位,由字母与数字组成" @change="cPayPassword" />
				</view>
				<view class="field-item">
					<view class="field-item-title">确认新二级密码</view>
					<van-field clearable type="password"  :value="from.payPassword2" placeholder="请确认您的新二级密码" @change="cPayPassword2" />
				</view>
			</view>
			<view class="register-btn"><van-button size="large" custom-class="register-btn-reset" :loading="loading" @click="onSubmit">确认</van-button></view>
		</view>
	</view>
</template>

<script>
import * as reg from '../../../common/utils/reg.js';
import { mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			ifSMS: false,
			loading: false,
			from: {
				phone: '',
				verification: '',
				password: '',
				password2: '',
				payPassword: '',
				payPassword2: ''
			},
			timer: {
				func: '',
				count: '',
				text: '获取'
			} // 倒计时
		};
	},
	computed: {},
	onLoad() {},
	methods: {
		sendCode() {
			const regPhone = reg.regPhone(this.from.phone);
			if (regPhone) {
				uni.showToast({
					title: regPhone,
					icon: 'none'
				});
				return;
			}
			if (this.ifSMS) return;
			if (this.timer.count > 0) return;
			this.ifSMS = true;
			this.$http
				.sendCode({
					phone: this.from.phone
				})
				.then(res => {
					if (res.data.success) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						});
						this.timer.count = 59;
						this.ifSMS = false;
						this.timer.func = setInterval(() => {
							this.timer.count--;
							this.timer.text = this.timer.count + 's';
							if (this.timer.count <= 0) {
								this.timer.text = '获取';
								clearInterval(this.timer.func);
							}
						}, 1000);
						return;
					}
					uni.showToast({
						title: res.data.errMsg,
						icon: 'none'
					});
				})
				.catch(err => {
					this.ifSMS = false;
				});
		},
		onSubmit() {
			if (this.loading) return;
			const regSubmit = reg.regSubmit(this.from);
			if (regSubmit) {
				uni.showToast({
					title: regSubmit,
					icon: 'none'
				});
				return;
			}
			this.loading = true;
			this.$http
				.forgetpwd({
					phone: this.from.phone,
					authCode: this.from.verification,
					newpwd: this.from.password,
					pwdtwo: this.from.payPassword
				})
				.then(res => {
					const data = res.data;
					this.loading = false;
					if (data.success) {
						uni.showToast({
							title: '修改成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
						return;
					}
					uni.showToast({
						title: data.errMsg,
						icon: 'none'
					});
				});
		},
		cPhone(e) {
			this.from.phone = e.detail
		},
		cVerification(e) {
			this.from.verification = e.detail
		},
		cPassword(e) {
			this.from.password = e.detail
		},
		cPassword2(e) {
			this.from.password2 = e.detail
		},
		cPayPassword(e) {
			this.from.payPassword = e.detail
		},
		cPayPassword2(e) {
			this.from.payPassword2 = e.detail
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../../common/user.scss';
.register {
}
</style>
